<template>
  <div class="top">
    <div class="top-container">
      <!-- 左侧按钮组 -->
      <div class="left-section">
        <dv-button border="Border10" fontColor="#41a6fc" fontSize="15" class="custom-button monitor-button"
          @click="handleFullScreen">
          <div class="button-content">
            <el-icon class="button-icon">
              <FullScreen />
            </el-icon>
            <span>全屏监控</span>
          </div>
        </dv-button>

        <dv-button border="Border11" fontColor="#41a6fc" fontSize="15" class="custom-button growth-button">
          <div class="button-content">
            <el-icon class="button-icon">
              <Histogram />
            </el-icon>
            <span>生长阶段</span>
          </div>
        </dv-button>
      </div>

      <!-- 中间标题 -->
      <div class="center-section">
        <dv-decoration7 class="title-decoration" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
          <div class="title-text">“青枣智园”可视化数字平台</div>
        </dv-decoration7>
      </div>

      <!-- 右侧区域 -->
      <div class="right-section">
        <!-- 时间显示 -->
        <div class="time-display">
          <el-icon class="time-icon">
            <Timer />
          </el-icon>
          <span class="time-text">{{ formattedDateTime }}</span>
        </div>

        <!-- 退出登录按钮 -->
        <dv-button border="Border8" fontColor="#41a6fc" fontSize="15" class="custom-button4 special-button"
          @click="handleLogout">
          <div class="button-content">
            <el-icon class="button-icon">
              <SwitchButton />
            </el-icon>
            <span>退出</span>
          </div>
        </dv-button>
      </div>
    </div>
    <div class="top-bottom">
      <dv-decoration-10 style="width:auto;height:30px;" :color="['#00ffd9', '#1E90FF']" />
    </div>
  </div>

</template>

<script setup>

import { ref, onMounted } from 'vue'
import { SwitchButton, Platform, Histogram, Timer, FullScreen } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 退出登录处理函数
const handleLogout = () => {
  localStorage.removeItem('loginInfo')
  router.push('/login')
}

// 添加全屏切换功能
const handleFullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}

// 时间格式化
const currentDateTime = ref(new Date())

const formattedDateTime = ref('')

const updateDateTime = () => {
  const date = currentDateTime.value
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()]
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')

  formattedDateTime.value = `${year}/${month}/${day} ${weekDay} ${hours}:${minutes}:${seconds}`
}

onMounted(() => {
  updateDateTime()
  setInterval(() => {
    currentDateTime.value = new Date()
    updateDateTime()
  }, 1000)
})

</script>

<style scoped>
.top-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: linear-gradient(180deg, rgba(0, 28, 36, 0.5) 0%, rgba(0, 70, 36, 0.5),rgba(0, 28, 36, 0.3) 100%);
}

.left-section,
.right-section {
  flex: 0 0 auto;
  display: flex;
  gap: 20px;  /* 按钮之间的间距 */
  align-items: center;
}

.center-section {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.title-decoration {
  width: 100%;  /* 调整装饰组件的宽度 */
  height: 60px;  /* 调整装饰组件的���度 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-text {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(0, 255, 217, 0.5);
  background: linear-gradient(180deg, #FFFFFF 0%, #00ffd9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 20px;
  white-space: nowrap;
}

.custom-button {
  padding: 0 20px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 28, 36, 0.5);
  border: 1px solid rgba(0, 255, 217, 0.3);
  border-radius: 4px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.custom-button4 {
  padding: 0px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 28, 36, 0.5);
  border: 1px solid rgba(0, 255, 217, 0.3);
  border-radius: 4px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.button-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.button-icon {
  font-size: 16px;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
}

.monitor-button {
  background: rgba(255, 77, 79, 0.1);
  box-shadow: 0 0 15px rgba(0, 255, 217, 0.3);
}

.monitor-button:hover {
  background: rgba(255, 77, 79, 0.2) !important;
  box-shadow:
      0 0 20px rgba(0, 255, 217, 0.4),
      inset 0 0 15px rgba(0, 255, 217, 0.4) !important;
}

.growth-button {
  background: rgba(0, 255, 217, 0.1);
  box-shadow: 0 0 15px rgba(0, 255, 217, 0.3);
}

.growth-button:hover {
  background: rgba(0, 255, 217, 0.2) !important;
  box-shadow:
      0 0 20px rgba(0, 255, 217, 0.4),
      inset 0 0 15px rgba(0, 255, 217, 0.4) !important;
}

.special-button {
  background: rgba(0, 28, 36, 0.4);
  border: 2px solid rgba(0, 255, 217, 0.8);
  box-shadow:
      inset 0 0 15px rgba(0, 255, 217, 0.6),
      0 0 20px rgba(0, 255, 217, 0.4);
}

.special-button:hover {
  background: rgba(0, 28, 36, 0.6) !important;
  border-color: #00ffd9 !important;
  box-shadow:
      inset 0 0 20px rgba(0, 255, 217, 0.8),
      0 0 25px rgba(0, 255, 217, 0.6) !important;
}

.monitor-button:hover .button-icon {
  animation: pulse 1.5s infinite;
}

.growth-button:hover .button-icon {
  animation: bounce 1.5s infinite;
}

.special-button:hover .button-icon {
  animation: rotate 3s linear infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.custom-button:hover {
  transform: none;
}

.time-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  height: 36px;
  background: rgba(0, 28, 36, 0.5);
  border: 2px solid rgba(0, 255, 217, 0.3);
  border-radius: 4px;
}

.time-icon {
  font-size: 16px;
  color: #00ffd9;
  animation: rotate 8s linear infinite;
}

.time-text {
  color: #00ffd9;
  font-size: 15px;
  white-space: nowrap;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}



/* 修改所有按钮的字体颜色属性 */
dv-button {
  --fontColor: #00ffd9 !important;
}
</style>